/**
 * Created by yoyoyk on 2017/7/13.
 */
import React from 'react';

import {dateFormat} from '../utils';

import classnames from 'classnames';

export default function BarNavUiComponent (p){

    const prop = Object.assign({},p);   //浅拷贝props

    const curDate = new Date();

    let {date,data,isShaft,index,MAX_TOTAL_COUNT,isEmpty,isSewing} = prop;

    let dateDateCur;

    let height;

    let ModalArraData = [];

    let chartStrokeColorClass = "";

    //展示月数
    if(date){
        let d = new Date(date);
        if( d.getDate() === 1 || index === 0){
            dateDateCur = `${d.getMonth()+1}/${d.getDate()}`;
        }else{
            dateDateCur = d.getDate();
        }
    }

    //展示移入数据
    if(isShaft &&　data){
          //容器高度
          const CONTAINER_HEIGHT = 250;

          const DATA = data.proStyleNoModelList;

          //计算高度
          height = data.totalCount / MAX_TOTAL_COUNT * CONTAINER_HEIGHT;

          DATA.forEach((item,index)=>{
              ModalArraData.push({
                  name:item.styleNo || "",
                  value:item.count || "",
                  proStatus:item.proStatus
              });
          });

          ModalArraData.push({
              name:"总计",
              value:data.totalCount
          });

          ModalArraData.reverse();

          chartStrokeColorClass = classnames({
              "Yyd-chart-stroke":true,
              chartStrokeRed:data.PRO_STATUS === "0"
          });
    }

    const isCurDay = dateFormat(curDate) === date;  //判断是否为今天

    const fixClass = classnames({currentDat:isCurDay,empty:isEmpty});

    return (<li data-type="chart-item" className={fixClass}>
                {
                    isCurDay || isEmpty ?
                    <span>
                        <span>
                           { dateDateCur }
                        </span>
                        <span>
                           {isCurDay && "今"}
                           {isEmpty && !isCurDay && "空"}
                        </span>
                    </span> : <span> {dateDateCur} </span>
                }
            {
                isShaft && <div style={{height: height || 0}} className={chartStrokeColorClass}>
                    {
                        ModalArraData.length >1 && <div data-type="info">
                            {
                                ModalArraData.map((item,index)=>
                                    <span className={classnames({mark:isSewing === true && item.proStatus === 0})} key={`modalArrData-${index}`}> {item.name +"  :  "} <span> {item.value} </span> </span>
                                )
                            }
                        </div>
                    }
                </div>
            }
        </li>
    )
}